<template>
    <div>
        <div class="view-chart-water" ref="chartView" :id="detail.identifier"></div>
        <div v-show="false">{{ chartsValue }}{{ width }}{{ height }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import 'echarts-liquidfill'; // 引入水球图的组件

import BaseView from '../View';

export default {
    name: 'ViewChartWater',
    extends: BaseView,
    props: {},
    computed: {
        ...mapState({
            mqttData: (state) => state.topoEditor.mqttData,
        }),
        chartsValue: function () {
            // 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let bindNum = this.detail.dataBind.serialNumber;
                let mqttNum = this.mqttData.serialNumber;
                if (type === 1) {
                    bindNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if (this.detail.dataBind.variableType && this.detail.dataBind.variableType !== 1) {
                        bindNum = this.detail.dataBind.sceneModelDeviceId;
                        mqttNum = this.mqttData.sceneModelDeviceId;
                    }
                }
                if (bindNum && bindNum === mqttNum && this.detail.dataBind.identifier) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataBind.identifier == this.mqttData.message[i].id) {
                            let modelValue = this.mqttData.message[i].value;
                            if (isNaN(modelValue)) {
                                modelValue = 0;
                            }
                            this.modelValue = modelValue;
                        }
                    }
                }
            }
            return this.detail.dataBind.modelValue;
        },
        width: function () {
            this.$nextTick(function () {
                this.myChart &&
                    this.myChart.resize({
                        width: this.detail.style.position.w,
                        height: this.detail.style.position.h,
                    });
            });
            return this.detail.style.position.w;
        },
        height() {
            this.$nextTick(function () {
                this.myChart &&
                    this.myChart.resize({
                        width: this.detail.style.position.w,
                        height: this.detail.style.position.h,
                    });
            });
            return this.detail.style.position.h;
        },
        option() {
            let waterData = this.modelValue / 100;
            let tempOption = {
                series: [
                    {
                        // 液位图
                        type: 'liquidFill',
                        name: 'chartWater',
                        // 显示文字
                        label: {
                            show: this.detail.style.waterLabel,
                            formatter: function (param) {
                                return parseInt(param.value * 100) + '%';
                            },
                            fontSize: this.detail.style.waterFontSize,
                            position: ['50%', '50%'],
                        },
                        // 波浪颜色
                        color: [this.detail.style.waterColor],
                        // 鼠标放上显示
                        tooltip: {
                            show: true,
                        },
                        // transparent
                        backgroundStyle: {
                            // 边框宽度
                            borderWidth: this.detail.style.waterBorderWidth,
                            borderColor: this.detail.style.waterBorderColor,
                            color: '#ff000000', // 背景色透明
                        },
                        data: [waterData],
                        // 液位图类型 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow',svg路径,container(充满容器)
                        shape: this.getLiquidfillShape(),
                        // 边框
                        outline: {
                            show: false,
                        },
                        // 初始动画加载时间，毫秒
                        animationDuration: 0,
                        // 数据更改加载时间，毫秒
                        animationDurationUpdate: 2000,
                        // 数据更改样式
                        animationEasingUpdate: 'cubicOut',
                        // 波浪坡度
                        amplitude: 5,
                        // 液体滚动速度
                        period: function (value, index) {
                            return 2000;
                        },
                    },
                ],
            };
            return tempOption;
        },
    },
    data() {
        return {
            modelValue: null,
            myChart: null,
        };
    },
    watch: {
        option: {
            handler(newVal, oldVal) {
                // 数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
                if (this.myChart) {
                    if (newVal) {
                        this.myChart.setOption(newVal);
                    } else {
                        this.myChart.setOption(oldVal);
                    }
                } else {
                    this.initEchart();
                }
            },
            deep: true, // 对象内部属性的监听
        },
    },
    mounted() {
        this.initEchart();
    },
    methods: {
        initEchart() {
            this.myChart = this.$echarts.init(document.getElementById(this.detail.identifier));
            const { modelValue } = this.detail.dataBind;
            this.modelValue = modelValue || 0;
        },
        getLiquidfillShape() {
            const { waterShape } = this.detail.style;
            if (waterShape === 'convex') {
                return 'path://M349.09.5c-3.06,1-2,3.51-2,5.48q-.08,60.77,0,121.54V133H341.6q-167.55,0-335.09,0c-6.28,0-6-.28-6,6Q.56,196,.52,253c0,5.47,0,5.47,5.49,5.47H801c6,0,6.49-.5,6.49-6.47q0-55.78,0-111.57c0-6-.52-6.48-6.49-6.48H458v-5.48Q458,67.25,458,6C458,.51,458,.5,452.46.5H349.59';
            } else {
                return waterShape;
            }
        },
    },
};
</script>

<style lang="scss">
.view-chart-water {
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
